<template>
    <div class="frame" :style="{ 'background-color': appBgColor }">
        <transition :enter-active-class="enterClass" :leave-active-class="leaveClass" @after-enter="pendingEnd" @after-leave="pendingStart" mode="out-in">
            <auto-image v-show="show" :src="src" :width="width" :height="height" :content-width="contentWidth" :content-height="contentHeight" />
        </transition>
    </div>
</template>

<style lang="scss" scoped>
.frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 1;
    flex-grow: 1;
}
</style>

<script>
import { mapState, mapActions } from 'vuex';
import AutoImage from '@/components/AutoImage';
import _ from 'lodash';

export default {
    components: { AutoImage },
    data() {
        return {
            timer: null
        };
    },
    computed: {
        ...mapState({
            playing: state => state.App.playing,
            picture: state => state.Queue.activePicture,
            enterClass: state => state.Queue.enterClass,
            leaveClass: state => state.Queue.leaveClass,
            showImage: state => state.Queue.showImage,
            src: state => state.Queue.activePicture.source,
            width: state => state.Queue.activePicture.width,
            height: state => state.Queue.activePicture.height,
            contentWidth: state => state.Queue.contentWidth,
            contentHeight: state => state.Queue.contentHeight,
            delaying: state => state.App.show,
            red: state => state.App.background_red,
            green: state => state.App.background_green,
            blue: state => state.App.background_blue
        }),
        show() {
            return this.playing && this.showImage;
        },
        appBgColor() {
            return `rgb(${this.red}, ${this.green}, ${this.blue})`;
        }
    },
    watch: {
        playing(newValue) {
            if (newValue) {
                this.hideImage();
                if (!_.isNull(this.timer)) clearTimeout(this.timer);
            }
        }
    },
    methods: {
        pendingEnd() {
            this.timer = setTimeout(this.hideImage, this.delaying);
        },
        pendingStart() {
            if (this.playing) this.pendingImageSelect();
        },
        ...mapActions(['pendingImageSelect', 'hideImage'])
    }
}
</script>

